先來複習一下什麼是 Turbo Frame

為什麼要用 Turbo Frame

一個頁面會區分成多個區塊，我們要做跨區的互動時，

往往要寫很多個 JS 監聽事件、動作、方法等等，

但 Turbo Frame 只需要用 Frame 包起來，就可以在裡面做互動。

且好處是每個區塊可以同時傳送 request

以往單執行緒的JS 發送 HTTP request 只能一個一個傳送，

Turbo Frame 使用平行處理，時間相對少很多，且更有效率

Turbo Frame 僅使用 GET 方法

可以應用這幾個 action ：append, prepend, replace, remove

怎麼達成 turbo-frame 的效果

假設我們今天要在 index 頁面可以直接跳出新增商品的表單

就可以用 turbo-frame 來做

step 1. 在連結中新增 data-turbo-frame 的屬性

# app/views/admin/drinks/index.html.erb

<%= link_to '新增飲品', new_admin_drink_path, data: {turbo_frame: 'new_drinks'} %>

在 HTML 會呈現

<a data-turbo-frame="new_drinks" href="/admin/drinks/new">新增飲品</a>

當我們點擊下去的時候，傳出去的 request method 為 GET

這時候會去找 id 名稱為 new_drinks 區塊的地方，並且回傳過來

所以接下來我們得把要渲染在畫面上的區塊加上 id 為 new_drinks

step 2. 在需要渲染的區塊加上 turbo_frame_tag

我們可以用 turbo_frame_tag 這個方法來替區塊加上 id

# app/views/admin/drinks/new.html.erb

<%= turbo_frame_tag 'new_drinks' do %>
  <h2 class="mb-10 text-2xl">新增飲品</h2>

  <%= render(DrinkFormComponent.new(drink: @drink)) %>
<% end %>

在 HTML 會呈現

<turbo-frame id="new_drinks" %>
  <h2 class="mb-10 text-2xl">新增飲品</h2>

  <%= render(DrinkFormComponent.new(drink: @drink)) %>
</turbo-frame>

可以注意到 turbo-frame 是一個 html 的 custom element

當 turbo-frame 事件被觸發時，

Turbo 就會用 AJAX 的方式去更新頁面部分區塊，而非整個頁面

我們替新增區塊加上 id 之後，也需要在原本頁面的地方加上相同 id

否則他不知道要渲染在哪裡

step 3. 在要替換的區塊也加上 turbo_frame_tag

一樣使用 turbo_frame_tag 即可完成

# app/views/admin/drinks/index.html.erb

<%= turbo_frame_tag 'new_drinks' do %>
  <%= link_to '新增飲品', new_admin_drink_path, data: {turbo_frame: 'new_drinks'} %>
<% end %>

而我們就可以直接在後台商品 index 頁面新增商品囉

(點進去可看影片效果)